﻿@model List<FTBS.Models.Entities.Film>

<style>
    .filmkind {
        padding: 5px;
        font-size: 27px;
        background-color: rgb(83, 141, 160);
        color: white;
    }

    .lableN {
        font-size: 17px;
        text-align: center;
        background-color: rgb(99, 82, 77);
        border-radius: 3px;
        color: white;
        display: inline-block;
        padding: 1px 2px 1px 2px;
    }
</style>
<div style="display: block;">
    @if (Model.Count > 0)
    {
        <div class="panel" style="display: table-cell; display: inline-block; background-color: white; margin-top: 20px; margin-left: 15px; width: 97.5%">
            <div class="container">
                <div class="filmkind">
                    <span>Phim đang chiếu</span>
                    <span style="float: right; height: 45px"><a href="/Film/ListShowingFilms">
                        <img class="arrow" src="~/Image/Icon/dou-ar.png" style="height: 45px; padding-bottom: 10px" />
                </a>

                    </span>
                </div>
                <hr style="margin-top: 3px; background-color: #ddd; height: 2px" />
                <div>
                    @if (Model.Count > 0 && Model.Count <= 3)
                    {
                        for (int i = 0; i < Model.Count; i++)
                        {
                        <!-- Phim đầu tiên -->
                        <div style="display: inline-block; width: 30%">
                            <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                <a href="/Home/Detail/@Model[i].FilmId">
                                    <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                      @if (@Model[i].IMDb > 7)
                                      {
                                                    <div style="position: absolute;top: 1px;right: 1px;">
                                                        <img src="~/Image/Icon/tag-blockbuster.png" /> </div>
                                      }
                                </a>
                                <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                    <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                    <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                </div>
                            </div>
                            <div>
                                <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[i].Name</strong>
                               <div style="font-size: 17px; margin-left: 3px; width: 80px;background-color: rgb(231, 184, 101);padding: 2px;border-radius: 2px;">IMdb: @Model[i].IMDb</div>
                                <div class="lableN" style="vertical-align:top">@Model[i].Format.FormatName</div>
                            </div>
                        </div>
                        }
                    }
                    else
                    {
                        <!-- Phim đầu tiên -->
                        <div style="display: inline-block; width: 25%">
                            <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                <a href="/Home/Detail/@Model[0].FilmId">
                                    <img src="~/Image/FilmImage/@Model[0].ImageURL" style="width:100%;height:400px" onclick="countCategoryView(@Model[0].CategoryId)" />
                                      @if (@Model[0].IMDb > 7)
                                      {
                                                    <div style="position: absolute;top: 1px;right: 1px;">
                                                        <img src="~/Image/Icon/tag-blockbuster.png" /> </div>
                                      }
                                </a>
                                <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                    <button class="small success" style="width: 40%; font-size: 16px; padding: 3px" onclick ="Trailer('@Model[0].TrailerURL','@Model[0].Name')">Trailer</button>
                                    <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                </div>
                            </div>

                            <div>
                                 <strong class="limitName" style="font-size: 20px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; line-height: 35px;">@Model[0].Name</strong>
                               <div style="font-size: 17px; margin-left: 3px; width: 80px;background-color: rgb(231, 184, 101);padding: 2px;border-radius: 2px; display:inline-block">IMdb: @Model[0].IMDb</div>
                                <div class="lableN" style="vertical-align:top;display:inline-block">@Model[0].Format.FormatName</div>
                            </div>
                        </div>
                        <div style="display: inline-block; width: 74%; vertical-align: top">
                            @if (Model.Count >= 4)
                            {
                                for (int i = 1; i < Model.Count; i++)
                                {
                                    <div style="display: inline-block; width: 30%; margin-left: 2%; margin-top: 0px">
                                            <div class="image-container shadow" style="margin-left: 1%; border: solid; border-width: 1px;">
                                                <a href="/Home/Detail/@Model[i].FilmId">
                                                    <img src="~/Image/FilmImage/@Model[i].ImageURL" style="width:100%;height:200px" onclick="countCategoryView(@Model[i].CategoryId)" />
                                                      @if (@Model[i].IMDb > 7)
                                                      {
                                                        <div style="position: absolute;top: 1px;right: 1px;">
                                                        <img src="~/Image/Icon/tag-blockbuster.png" /> </div>
                                                      }
                                                </a>
                                                <div class="overlay-fluid" style="width: 100%; padding-left: 12%; padding-top: 2%">
                                                    <button class="small success" style="width: 40%; font-size: 16px; padding: 3px"  onclick ="Trailer('@Model[i].TrailerURL','@Model[i].Name')">Trailer</button>
                                                    <button class="small warning" style="width: 40%; font-size: 16px; padding: 3px; margin-left: 20px" onclick="ChangeView()">Mua vé</button>
                                                </div>
                                            </div>
                                            <div style="display: block; width: 100%;margin:5px">
                                                
                                                <strong class="limitName" style="font-size: 15px; text-transform: uppercase; color: rgba(255, 0, 0, 0.89); text-align: left; ">@Model[i].Name</strong>
                                                
                                                <div style="font-size: 17px; margin:0px 12px 0px 0px;width: 80px;background-color: rgb(231, 184, 101);padding: 2px;border-radius: 2px;display:inline-block">IMDb: @Model[i].IMDb</div>
                                                <div class="lableN" style="vertical-align:top">@Model[i].Format.FormatName</div>
                                            </div>
                                   </div>                              
                                }   
                            }                            
                        </div>
                    }
                </div>
            </div>
        </div>  
    }
</div>

<script>
    function ChangeView() {
        window.location.href = "/Schedule/Schedule";
    }
    $(document).ready(function () {
        $(".arrow").mouseenter(function () {
            $(".arrow").attr("src", "/Image/Icon/dou-ar-red.png")

        });
        $(".arrow").mouseleave(function () {
            $(".arrow").attr("src", "/Image/Icon/dou-ar.png")
        });
    });
</script>
